<template>
  <div>
    <!-- 查询与添加按钮开始 -->
    <el-form
      :inline="true"
      class="demo-form-inline"
      style="width: 70%; text-align: left; margin-left: 250px"
    >
      <el-form-item>
        <el-input placeholder="请输入交往标题" v-model="selMsg"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="selbtn()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="addbtn()">增加交往记录</el-button>
      </el-form-item>
    </el-form>
    <!-- 查询与添加按钮结束 -->

    <!-- 模态框开始 -->
    <el-dialog title="编辑交往记录" :visible.sync="AssInfoDialog">
      <el-form
        label-position="left"
        inline="true"
        :model="associate"
        :rules="rules"
        ref="assForm"
      >
        <el-form-item
          label="标题"
          prop="ass_title"
        >
          <el-input
            type="text"
            v-model="associate.ass_title"
            style="width: 100%"
          ></el-input>
        </el-form-item>
        <br />
        <el-form-item
          label="客户联系人"
          
          prop="cli_id"
        >
          <el-select
            v-model="associate.cli_id"
            clearable
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in clientList"
              :key="item.cli_id"
              :label="item.cli_name"
              :value="item.cli_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="员工" >
          <el-input
            disabled="true"
            type="text"
            v-model="user.name"
            style="width: 100%"
          ></el-input>
        </el-form-item>
        <el-form-item label="地点"  prop="ass_add">
          <el-input
            type="text"
            v-model="associate.ass_add"
            style="width: 100%"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="时间"
          prop="ass_time"
        >
          <el-date-picker
            v-model="associate.ass_time"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker> </el-form-item
        ><br />
        <el-form-item
          label="详细信息"
          prop="ass_content"
        >
          <el-input
            v-model="associate.ass_content"
            type="textarea"
            style="width: 100%"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="AssInfoDialog = false">取 消</el-button>
        <el-button type="primary" @click="save('assForm')">保 存</el-button>
      </div>
    </el-dialog>
    <!-- 模态框结束 -->

    <!-- 展示窗口开始 -->
    <el-table
      ref="multipleTable"
      :data="pageInfo.list"
      tooltip-effect="dark"
      style="width: 60%; margin: 0px auto"
    >
      <el-table-column type="selection" width="55" prop="ass_iid" v-if="false">
      </el-table-column>
      <el-table-column prop="ass_title" label="交往标题" width="120">
      </el-table-column>
      <el-table-column prop="client.cli_name" label="联系人" width="120">
      </el-table-column>
      <el-table-column prop="users.user_name" label="员工" width="120">
      </el-table-column>
      <el-table-column prop="ass_time" label="交往时间" width="120">
      </el-table-column>
      <el-table-column prop="ass_add" label="地点" width="80">
      </el-table-column>
      <el-table-column label="详情" width="50">
        <template slot-scope="scope">
          <div @click="selAssContent(scope.row)">
            <i class="el-icon-document" type="primary" size="big"></i>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- <el-button   icon="el-icon-edit" circle="" @click="updAss(scope.row)"></el-button> -->
          <el-button
            icon="el-icon-delete"
            circle=""
            @click="delAss(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.pageNum"
      :page-sizes="[2, 10, 20, 30]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>
    <!-- 展示窗口结束 -->

    <!-- 交往详情弹窗 -->
    <el-drawer
      title="交往详情"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <span>{{ content }}!</span>
    </el-drawer>
    <!-- 交往详情弹窗结束 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      selMsg: "",
      clientList: [],
      AssInfoDialog: false,
      user: {
        name: "",
        code: "",
      },
      content: "",
      drawer: false,
      direction: "rtl",
      companyId: "",
      pageInfo: {},
      currentPage: 1,
      pageSize: 2,
      associate: {
        ass_add: "",
        ass_iid: "",
        cli_id: "",
        ass_usercode: "",
        ass_time: "",
        ass_title: "",
        ass_content: "",
        ass_status: 1,
      },
      rules: {
        ass_title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
        cli_id: [{ required: true, message: "联系人不能为空", trigger: "change" }],
        ass_time: [{ required: true, message: "请选择时间", trigger: "blur" }],
        ass_add: [{ required: true, message: "地点不能为空", trigger: "blur" }],
        ass_content: [{ required: true, message: "请描述具体情况", trigger: "blur" }],
      },
    };
  },
  methods: {
    LoadData() {
      //alert("1")
      this.$axios
        .get("/associate", {
          params: {
            selMsg: this.selMsg,
            comid: this.companyId,
            currentPage: this.currentPage,
            pageSize: this.pageSize,
          },
        })
        .then((res) => {
          this.pageInfo = res.data.data;
        })
        .catch((error) => {});
    },
    //val：每页的条目数
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.LoadData();
      console.log(`每页 ${val} 条`);
    },
    //val:当前页L
    handleCurrentChange(val) {
      this.currentPage = val;
      this.LoadData();
      console.log(`当前页: ${val}`);
    },
    //点击详情按钮事件
    selAssContent(msg) {
      this.content = msg.ass_content;
      this.drawer = true;
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
    delAss(associate) {
      this.$axios
        .post("/associatedel", associate)
        .then((res) => {
          this.LoadData();
        })
        .catch((error) => {});
    },
    addbtn() {
      this.AssInfoDialog = true;
      this.associate.ass_usercode = this.user.code;
      this.$axios
        .get("/clients/" + this.companyId)
        .then((res) => {
          this.clientList = res.data.data;
        })
        .catch((error) => {});
    },
    save(assForm) {
      this.$refs[assForm].validate((res) => {
        if (res) {
          this.$axios
            .post("/associateAdd", this.associate)
            .then((res) => {
              this.LoadData();
              this.associate.ass_iid = "";
              this.associate.cli_id = "";
              this.associate.ass_usercode = "";
              this.associate.ass_time = "";
              this.associate.ass_title = "";
              this.associate.ass_content = "";
              this.associate.ass_add = "";
            })
            .catch((error) => {});
          this.AssInfoDialog = false;
        } else {
          console.log("error submit!!!");
          return false;
        }
      });
    },
    selbtn() {
      //alert(this.selMsg)
      this.LoadData();
    },
  },
  mounted() {
    this.companyId = this.$route.params.id;
    this.LoadData();
    this.user.name = sessionStorage.getItem("user_name");
    this.user.code = sessionStorage.getItem("user_code");
  },
};
</script>
